/**
 * 负责渲染
 */

const FRAGMENT = "__MYREACT_FRAGMENT";

const render = (element, container) => {
  if (element.type === FRAGMENT) {
    element.children.forEach((fElement) => render(fElement, container));
    return;
  }

  // 创建dom节点
  const node =
    element.type === "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(element.type);
  // 复制属性, 注意：这里如果没有props，props的结果是null
  element.props &&
    Object.keys(element.props).forEach((key) => {
      node[key] = element.props[key];
    });
  // 渲染子结点
  element.children.forEach((child) => {
    render(child, node);
  });
  // ? 为什么不放在前面？ 思考一下递归的流程，如果这句放在前面，那就是从根节点开始，逐步的进行更新渲染，会导致很多次重排；现在这种方式只会引发一次重排
  container.appendChild(node);
};

export default {
  render,
};
